<template>
  <el-container class="main_con">
    <div class="filter_con">
      <div class="button_area">
        <el-button v-has size="medium" type="primary" @click="addtree(1)">添加一级分类</el-button>
        <el-button size="medium" type="primary" @click="showAll" style="margin-left:15px">
          <i style="margin-right:5px;" :class="showAllLine ? 'el-sc-xia5 tanto' : 'el-sc-xia5'"></i>
          {{showAllLine ? '全部折叠' : '全部展开'}}
        </el-button>
        <el-button
          v-has
          size="medium"
          type="primary"
          @click="showLevelFun"
          style="margin-left:15px"
        >设置层级分类</el-button>
      </div>
    </div>

    <div class="list_con">
      <div class="catelist">
        <div class="header">
          <div class="dragbox"></div>
          <div class="arrow"></div>
          <div class="cname">分类名称</div>
          <div class="cpic">分类图片</div>
          <!-- <div class="time">创建时间</div> -->
          <div class="status">状态</div>
          <div class="cbutton">操作</div>
        </div>
        <div class="cate_con">
          <draggable element="ul" v-model="list" :animation="200">
            <div class="cate_sin" v-for="(item,i) in list" :key="i">
              <div class="cate_name">
                <div class="dragbox">
                  <i class="el-icon-rank"></i>
                </div>
                <div class="arrow" v-if="level > 1" @click="change_showchild(item)">
                  <i :class="item.showchild ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>
                </div>
                <div class="cname">
                  一级
                  <el-input
                    v-model="item.name"
                    size="medium"
                    style="width:200px;margin-left:10px"
                    maxlength="6"
                    show-word-limit
                  ></el-input>
                  <el-button
                    v-if="level > 1"
                    type="text"
                    size="medium"
                    style="margin-left:10px"
                    @click="addtree(2,i)"
                  >+添加二级分类</el-button>
                </div>
                <div class="cpic">
                  <div style="width: 40px; height: 40px;">
                    <Upload :tempUrl="item.img" @input="getimg($event,item)"></Upload>
                  </div>
                </div>
                <!-- <div class="time">0000-00-00 00:00:00</div> -->
                <div
                  :class="'status ' + (item.status ? 'show' : 'hidden')"
                >{{item.status ? '显示' : '隐藏'}}</div>
                <div class="cbutton">
                  <el-button
                    type="text"
                    size="medium"
                    @click="showHide(item)"
                  >{{item.status == 1 ? '隐藏' : '显示'}}</el-button>
                  <el-button type="text" size="medium" @click="handleClose(item.id,list,i)">删除</el-button>
                </div>
              </div>

              <span v-if="item.children.length > 0 && level > 1">
                <draggable v-show="item.showchild" v-model="item.children" :animation="200">
                  <div class="lv_next_lv2" v-for="(item2,l) in item.children" :key="l">
                    <div class="cate_name">
                      <div class="dragbox">
                        <i class="el-icon-rank"></i>
                      </div>
                      <span class="bkl"></span>
                      <div class="arrow" v-if="level > 2" @click="change_showchild(item2)">
                        <i
                          :class="item2.showchild ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"
                        ></i>
                      </div>
                      <div class="cname">
                        二级
                        <el-input
                          v-model="item2.name"
                          size="medium"
                          style="width:200px;margin-left:10px"
                          maxlength="6"
                          show-word-limit
                        ></el-input>
                        <el-button
                          v-if="level > 2"
                          type="text"
                          size="medium"
                          style="margin-left:10px"
                          @click="addtree(3,i,l)"
                        >+添加三级分类</el-button>
                      </div>
                      <div class="cpic">
                        <div style="width: 40px; height: 40px;">
                          <Upload :tempUrl="item2.img" @input="getimg($event,item2)"></Upload>
                        </div>
                      </div>
                      <!-- <div class="time">0000-00-00 00:00:00</div> -->
                      <div
                        :class="'status ' + (item2.status ? 'show' : 'hidden')"
                      >{{item2.status ? '显示' : '隐藏'}}</div>
                      <div class="cbutton">
                        <el-button
                          type="text"
                          size="medium"
                          @click="showHide(item2)"
                        >{{item2.status == 1 ? '隐藏' : '显示'}}</el-button>
                        <el-button
                          type="text"
                          size="medium"
                          @click="handleClose(item2.id,item.children,l)"
                        >删除</el-button>
                      </div>
                    </div>

                    <span v-if="item2.children.length > 0 && level > 2">
                      <draggable v-show="item2.showchild" v-model="item2.children" :animation="200">
                        <div class="lv_next_lv3" v-for="(item3,k) in item2.children" :key="k">
                          <div class="cate_name">
                            <div class="dragbox">
                              <i class="el-icon-rank"></i>
                            </div>
                            <span class="bkl"></span>
                            <div class="cname">
                              三级
                              <el-input
                                v-model="item3.name"
                                size="medium"
                                style="width:200px;margin-left:10px"
                                maxlength="6"
                                show-word-limit
                              ></el-input>
                            </div>
                            <div class="cpic">
                              <div style="width: 40px; height: 40px;">
                                <Upload :tempUrl="item3.img" @input="getimg($event,item3)"></Upload>
                              </div>
                            </div>
                            <!-- <div class="time">0000-00-00 00:00:00</div> -->
                            <div
                              :class="'status ' + (item3.status ? 'show' : 'hidden')"
                            >{{item3.status ? '显示' : '隐藏'}}</div>
                            <div class="cbutton">
                              <el-button
                                type="text"
                                size="medium"
                                @click="showHide(item3)"
                              >{{item3.status == 1 ? '隐藏' : '显示'}}</el-button>
                              <el-button
                                type="text"
                                size="medium"
                                @click="handleClose(item3.id,item2.children,k)"
                              >删除</el-button>
                            </div>
                          </div>
                        </div>
                      </draggable>
                    </span>
                  </div>
                </draggable>
              </span>
            </div>
          </draggable>
        </div>
      </div>
      <div class="table_footer">
        <el-button v-has @click="save_classify">保存</el-button>
      </div>
    </div>

    <!-- <div class="list_con">
      <div class="box">
        <div class="box_tr tree"><span>分类名称</span></div>
        <div class="box_tr"><span>类别图片</span></div>
        <div class="box_tr"><span>创建时间</span></div>
        <div class="box_tr"><span>状态</span></div>
        <div class="box_tr"><span>操作</span></div>
      </div>
      <draggable element="ul" v-model="list">
        <div v-for="(item,i) in list" :key="i">
          <div class="box tree_one">
            <div class="box_tr tree">
              <i class="el-icon-caret-bottom" @click="change_showchild(item)" />
              <span>一级分类</span>
              <el-input size="medium" class="box_input" v-model="item.name"></el-input>
              <el-button type="text" @click="addtree(2,i)">添加二级分类</el-button>
            </div>
            <div class="box_tr">
              <div class="imgbox">
                <Upload :tempUrl="item.img" :params="{a:i,}" @input="getimg($event,i)"></Upload>
              </div>
            </div>
            <div class="box_tr">
              <span>201535354354343</span>
            </div>
            <div class="box_tr">
              <span>{{item.status? '显示':'隐藏'}}</span>
            </div>
            <div class="box_tr">
              <el-button type="text" @click="handleClose(item.id)">删除</el-button>
              <el-button type="text" @click="item.status=!item.status">{{item.status? '隐藏':'显示'}}</el-button>
            </div>
          </div>
          <draggable v-if="item.showchild&&item.children&&item.children.length>0" v-model="item.children">
            <div v-for="(value,e) in item.children" :key="e">
              <div class="box tree_two">
                <div class="box_tr tree tr_two">
                  <i class="el-icon-caret-bottom" @click="change_showchild(value)" />
                  <span>二级分类</span>
                  <el-input size="medium" class="box_input" v-model="value.name"></el-input>
                  <el-button type="text" @click="addtree(3,i,e)">添加三级分类</el-button>
                </div>
                <div class="box_tr">
                  <div class="imgbox">
                    <Upload :tempUrl="value.img" :params="{a:i,b:e}" @input="getimg"></Upload>
                  </div>
                </div>
                <div class="box_tr">
                  <span>201535354354343</span>
                </div>
                <div class="box_tr">
                  <span>{{value.status? '显示':'隐藏'}}</span>
                </div>
                <div class="box_tr">
                  <el-button type="text" @click="handleClose(value.id)">删除</el-button>
                  <el-button type="text" @click="value.status=!value.status">{{value.status? '隐藏':'显示'}}</el-button>

                </div>
              </div>
              <draggable v-if="value.showchild&&value.children&&value.children.length>0" v-model="value.children">
                <div v-for="(data,c) in value.children" :key="c">
                  <div class="box tree_three">
                    <div class="box_tr tree tr_three">

                      <span>三级分类</span>
                      <el-input size="medium" class="box_input" v-model="data.name"></el-input>
                    </div>
                    <div class="box_tr">
                      <div class="imgbox">
                        <Upload :tempUrl="data.img" :params="{a:i,b:e,c:c}" @input="getimg"></Upload>
                      </div>
                    </div>
                    <div class="box_tr">
                      <span>201535354354343</span>
                    </div>
                    <div class="box_tr">
                      <span>{{data.status? '显示':'隐藏'}}</span>
                    </div>
                    <div class="box_tr">
                      <el-button type="text" @click="handleClose(data.id)">删除</el-button>
                      <el-button type="text" @click="data.status=!data.status">{{data.status? '隐藏':'显示'}}</el-button>

                    </div>
                  </div>
                </div>
              </draggable>
            </div>
          </draggable>
        </div>
      </draggable>
    </div>-->
    <el-dialog title="设置分类层级" destroy-on-close :visible.sync="showLevel" width="1300px">
      <cateLevel :type="type" :level="level" @nlevel="getNewLevel"></cateLevel>
    </el-dialog>
  </el-container>
</template>

<script>
// 引入拖拽组件
import draggable from "vuedraggable";
// import Upload from '@/components/Upload/SingleImage'
import Upload from "@/components/Upload/SingleImage2";
import cateLevel from "./components/cateLevel";
import { classify_list, save_classify, del_classify } from "@/api/mall/product";
export default {
  name: "category",
  components: {
    draggable,
    Upload,
    cateLevel
  },
  data() {
    return {
      level: 1,
      type: "1",
      isloading: false,
      showLevel: false,
      list: [],
      showAllLine: true,
      delLits: []
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    //展开修改层级
    showLevelFun() {
      //this.rk++;
      this.showLevel = true;
    },
    //获得修改后的新层级
    getNewLevel(ob) {
      this.level = ob.level;
      this.type = ob.type;
      this.showLevel = false;
      //console.log(this.level)
    },
    //全部折叠
    showAll() {
      this.showAllLine = !this.showAllLine;
      this.list.forEach(e => {
        e.showchild = this.showAllLine;
        //循环二级
        if (e.children.length > 0) {
          e.children.forEach(m => {
            m.showchild = this.showAllLine;
            //循环三级
            if (m.children.length > 0) {
              m.children.forEach(n => {
                n.showchild = this.showAllLine;
              });
            }
          });
        }
      });
    },
    //折叠显示
    change_showchild(data) {
      //console.log(data)
      if (data.showchild) {
        data.showchild = false;
      } else {
        data.showchild = true;
      }
    },
    //图片上传
    getimg(img, item) {
      item.img = img;

      // let params = data.params;

      // let c = Object.keys(params).length;

      // if (c == 1) {
      //   this.list[params.a].img = data.tempimg
      // } else if (c == 2) {
      //   this.list[params.a].children[params.b].img = data.tempimg
      // } else if (c == 3) {
      //   this.list[params.a].children[params.b].children[params.c].img = data.tempimg

      // }
    },
    //保存
    save_classify() {
      let list = Object.assign(this.list);
      let v = 1;
      let data = {
        data: list,
        delete_ids: this.delLits
      };
      if (data.delete_ids == null) {
        data.delete_ids = [];
      }
      if (this.ifArrVal(list, v) == true) {
        save_classify(data).then(res => {
          this.getlist();
          this.showAllLine = true;
        });
      }
    },
    // 验证方法
    ifArrVal(arr, v) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].name == "" ) {
          return this.$message.error(v + "级分类的标题不能为空");
        }
        if (arr[i].name !== "") {
          v++;
          return this.ifArrVal(arr[i].children, v);
        }
      }
      return true;
    },
    //获取数据
    getlist() {
      let data = {};
      this.isloading = true;
      classify_list(data).then(res => {
        this.isloading = false;
        let jsondata = res.msg;
        this.level = jsondata.level;
        this.type = jsondata.type;
        let list = jsondata.data;
        list.forEach(a => {
          a.showchild = this.showAllLine;
          a.children.length > 0 &&
            a.children.forEach(b => {
              b.showchild = this.showAllLine;
              b.children.length > 0 &&
                b.children.forEach(c => {
                  c.showchild = this.showAllLine;
                });
            });
        });
        this.list = list;
      });
    },
    //添加新的分类
    addtree(type, i, e) {
      if (type == 1) {
        var data = {
          name: "",
          status: 1,
          img: "",
          showchild: true,
          children: []
        };
        var list = this.list;
        list.push(data);
        this.list = list;
      } else if (type == 2) {
        //let pid = this.list[i].id;
        this.list[i].children.push({
          pid: this.list[i].id,
          name: "",
          status: 1,
          img: "",
          showchild: true,
          children: []
        });
        this.list[i].showchild = true;
      } else if (type == 3) {
        //let pid = this.list[i].children[e].id
        this.list[i].children[e].children.push({
          pid: this.list[i].children[e].id,
          name: "",
          status: 1,
          img: "",
          children: []
        });
        this.list[i].children[e].showchild = true;
      }
    },
    //删除
    handleClose(id, parent, index) {
      let _this = this;
      parent.splice(index, 1);
      let data = {
        id: parseInt(id)
      };
      this.isloading = false;
      _this.delLits.push(data.id);
    },
    //改变状态
    showHide(item) {
      if (item.status == 1) {
        item.status = 0;
      } else {
        item.status = 1;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.catelist {
  width: 100%;
  color: #606266;

  .header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    font-weight: 700;

    .dragbox {
      width: 50px;
    }

    .arrow {
      width: 18px;
    }

    .cname {
      flex: 1;
      padding-left: 10px;
    }

    .cpic {
      width: 150px;
      display: flex;
      justify-content: center;
    }

    .time {
      width: 180px;
    }

    .status {
      width: 120px;
    }

    .cbutton {
      width: 120px;
    }
  }

  .cate_con {
    // max-height: 500px;
    // overflow-y:auto;
    padding-bottom: 10px;

    .cate_sin {
      width: 100%;
      margin-top: 10px;
      border: 2px solid #e6e8eb;

      .cate_name {
        width: 100%;
        height: 60px;
        line-height: 60px;
        display: flex;
        background-color: #fff;

        .dragbox {
          width: 50px;
          text-align: center;
          font-size: 18px;
          cursor: move;
        }

        .bkl {
          display: inline-block;
          border-left: 1px solid #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
          width: 20px;
          height: 20px;
          margin: 15px 30px 3px 20px;
        }

        .arrow {
          margin-left: 10px;
          width: 18px;
          text-align: center;
          font-size: 18px;
          color: #b8b9bd;
          cursor: pointer;
        }

        .cname {
          flex: 1;
          padding-left: 10px;
          // display: flex;
          // align-items: center;

          // .bkl{
          //   display: inline-block;
          //   border-left: 1px solid #DCDFE6;
          //   border-bottom: 1px solid #DCDFE6;
          //   width: 20px;
          //   height: 20px;
          //   margin: 0 30px 3px 20px;
          // }
          ::v-deep .el-input {
            .el-input__inner {
              width: 201px;
              border: 1px solid #d7d7d7;
              border-radius: 4px;
              background-color: rgba(237, 240, 243, 1) !important;
            }
            .el-input__count-inner {
              background-color: rgba(237, 240, 243, 1);
            }
          }
        }

        .cpic {
          line-height: normal;
          width: 150px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .time {
          width: 180px;
        }

        .status {
          width: 120px;

          &.show {
            color: #66c337;
          }

          &.hidden {
            color: #ff8400;
          }
        }

        .cbutton {
          width: 120px;
        }
      }

      .lv_next_lv2 {
        .cate_name {
          background: #f8f8f8;
          border-top: 2px solid #e6e8eb;

          .bkl {
            margin: 12px 0px 3px 50px;
          }
        }

        .lv_next_lv3 {
          .cate_name {
            background: #fffdf9;
            border-top: 2px solid #e6e8eb;

            .bkl {
              margin: 12px 0px 3px 120px;
            }

            // .cname{
            //   .bkl{
            //     margin-left:80px;
            //   }
            // }
          }
        }
      }
    }
  }
}
.tanto {
  transform: rotate(180deg);
}
</style>
